<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="lib/bootstrap-3.3.7-dist/css/bootstrap.css">
     <script src="js/HttpUtil.js"></script>
</head>
<body>
<ul class="nav nav-pills navbar navbar-inverse"  >
    <li role="presentation" ><a href="#">首页</a></li>
    <li role="presentation"><a href="http://localhost:8080/gs/owner.html">业主信息管理</a></li>
    <li role="presentation"><a href="#">人员列表</a></li>
    <button type="button" class="btn btn-primary" style="float: right;margin-top: 5px" onclick="fresh()">
        <span class="glyphicon glyphicon-refresh" aria-hidden="true" ></span>
    </button>
</ul>
<div>
    <span style=" float:left;margin-left: 350px;margin-top: 105px;text-align: center;border: solid 1px #ccc;width: 110px;
height: 40px;line-height: 40px;color: #c0c4cc">日期范围</span>
</div>
<div>
<div class="input-group input-group-addon" style="width: 250px; float:left;margin-left: 10px;margin-top: 100px" >
    <input type="text" class="form-control" placeholder="开始日" aria-describedby="basic-addon1" id="start">
</div>

<div class="input-group input-group-addon" style="width: 250px ;float:left;margin-left: 10px;margin-top: 100px" >
    <input type="text" class="form-control" placeholder="截止日" aria-describedby="basic-addon2" id="end">
</div>
<div class="input-group input-group-addon" style="width: 250px;float:left;margin-left: 10px;margin-top: 100px" >
    <input type="text" class="form-control" placeholder="标题" aria-describedby="sizing-addon3" id="searchByKeyWords">
</div>
<button type="button" class="btn btn-primary" style="margin-top: 105px;margin-left: 10px;float: left" onclick="findOwner()">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</div>
<div style="width: 1000px;height: 150px">
<button type="button" class="btn btn-danger" style="margin-top: 30px;margin-left: 50px;">
    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
    批量删除
</button>
    <button type="button" class="btn btn-primary" style="margin-top: 30px;margin-left: 10px;" onclick="add()">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
        添加
    </button>
</div>
<div style="width: 1500px; margin-top: 100px;">
<table id="tb" cellpadding="0" cellspacing="0" border="solid 1px black" width="1400px" hight="1500px" class="table table-hover">
    <thead id="hide_tbody">
        <th>勾选框</th>
        <th>ID</th>
        <th>所属小区</th>
        <th>所属房产</th>
        <th>成员名称</th>
        <th>成员照片</th>
        <th>身份证号</th>
        <th>联系方式</th>
        <th>职业</th>
        <th>出生日期</th>
        <th>性别</th>
        <th>成员类型</th>
        <th>备注</th>
        <th>创建时间</th>
        <th>操作</th>
    </thead>
   <tbody id="tbody">
   <td><button  class="btn btn-default" onclick="chooseIds()">
       <span class="glyphicon glyphicon-ok" aria-hidden="true" style="display: none" id="gou"></span>
   </button></td>
   <td>ID</td>
   <td>所属小区</td>
   <td>所属房产</td>
   <td>成员名称</td>
   <td><img src="#"  alt="找不到" class="img-rounded" style=" width:50px; height:50px"></td>
   <td>身份证号</td>
   <td>联系方式</td>
   <td>职业</td>
   <td>出生日期</td>
   <td>性别</td>
   <td>成员类型</td>
   <td>备注</td>
   <td>创建时间</td>
   <td>
       <button>
       <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
       </button>
       <button>
       <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
       </button>
   </td>
   </tbody>
</table>
</div>
<script>
     function fresh() {
         location.reload();
     }
    function findOwner() {
        var val = $("#start").val();
        var val1 = $("#end").val();
        var val2 = $("#searchByKeyWords").val();
       if (val1 &&val1 !=null){
           location.href="http://localhost:8080/gs/owner-serch.html?start="+val+"&end="+val1+"searchByKeyWords="+val2;
       } else {
           location.href="http://localhost:8080/gs/owner-serch.html?searchByKeyWords="+val2;
       }
    }
    function add(){
         location.href="http://localhost:8080/gs/owner-add.html";
    }
    $(function () {
        showAllOwners();
    });
    function showAllOwners() {
        let url="owner/showManagement";

        httpGetNoParams(url,function (resp) {
            console.log()
            console.log(resp);
              showAllList(resp);
        });
    }
    function showAllList(owners) {
        let threadHtml=$("#tbody").html();
        let ownersListHtml="";
        let typeOwnerHtml="";
     $.each(owners,function (index,owner) {
        typeOwnerHtml= threadHtml.replace("ID",owner.ownerId)
         .replace("所属小区",owner.ownerCommunityId)
        .replace("所属房产",owner. ownerHouseId)
        .replace("成员名称",owner.ownerName)
        .replace("#",owner.ownerPic)
         .replace("身份证号",owner.ownerNo)
         .replace("联系方式",owner.ownerConnect)
         .replace("职业",owner.ownerWork)
         .replace("出生日期",owner.ownerBirth)
         .replace("性别",owner.ownerGender)
         .replace("成员类型",owner.ownerType)
         .replace("备注",owner.ownerRemarks)
         .replace("创建时间",owner.creatTime);
         ownersListHtml+=typeOwnerHtml;
     });
        $("#tbody").html(ownersListHtml);
    }
</script>
</body>
</html>